<template>
  <div class="sell">
    <div v-if="sell.length>0">
      <div class="head" >
        <img :src="`${this.poi_info.head_pic_url}`" alt="">
      </div>

      <div class="top">
        <router-link to="/waimai" tag="span">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiantou"></use>
        </svg>
        </router-link>
        <span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weixingbiao"></use>
          </svg>
        </span>
      </div>
      <div class="content">
        <div class="po">
          <img :src="this.poi_info.pic_url" alt="">
        </div>
        <h2>{{this.poi_info.name}}</h2>
        <div class="star">
          <span>
            *{{this.poi_info.wm_poi_score}}
          </span>
          <span>配送约{{this.poi_info.avg_delivery_time}}分钟</span>
        </div>
        <div class="notice">
          公告：{{this.poi_info.bulletin}}
        </div>
      </div>
      <div class="con-list">
        <router-link :to="{path:`/sell/${this.id}/goods` , query:{'goods':this.goods}}" tag="div" class="order">点菜</router-link>

        <router-link to="" tag="div" class="evaluate">评价</router-link>
        <router-link to="" tag="div" class="Shops">商家</router-link>
      </div>
      <router-view>
      </router-view>
    </div>
  </div>
</template>

<script>
import {getAllPro} from '@/api/request'
import '@/assets/iconfont/iconfont.js';
export default {
  data() {
    return {
      sell:[],
      id:0
    }
  },
  methods: {
    
  },
  created() {
          getAllPro("/sellList").then(res=>{
            let {data} = res.data
            this.sell = data
            this.id = this.$route.params.id

            // 编程式导航
            this.$router.push(
              {path:`/sell/${this.id}/goods` , query:{'goods':this.goods}})
          })
    },
    computed: {
      poi_info(){
        let arr = this.sell.filter((item)=>{
          return item.poi_info.id == this.$route.params.id
        })
        let [obj]= arr
        return obj.poi_info
      },
      goods(){
        let arr = this.sell.filter((item)=>{
          return item.poi_info.id == this.$route.params.id
        })
        return arr
      },
      
    },
  watch: {
  },
}
</script>

<style lang="scss" scoped>
  .icon{
        // padding-top: .1rem;
        margin:.4rem;
        width: 0.4rem;
        height: .4rem;
        color: #fff;
      }

  .sell{
    
    // bottom: 1.8rem;
    margin-bottom: 1.8rem;
  overflow: hidden;
    .head{
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      img{
        width: 100%;
        filter: blur(3px);
      }
    }

    .top{
      position: relative;
      top: 0;
      left: 0;
      height: 0.2rem;
      display: flex;
      justify-content: space-between;
      
    }

    .content{
      // position: relative;
      border-radius: .5rem;
      background-color: #fff;
      margin-top: 2rem;
      // top: -1.5rem;
      padding: .1rem  .2rem;
      z-index: 50;

      .po{
        position: absolute;
        top: 1.9rem;
        right: 0;
        width: 2rem;
        height: 2rem;
        // border-radius: .4rem;
        img{
          width: 1.5rem;
          height: 1.5rem;
          border-radius: .2rem;
        }
      }
      
      h2{
        margin-top: .2rem;
        width: 6rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .star{
        margin-top: .1rem;
      }

      .notice{
        padding: .1rem;
        color: #858687;
      }
    }

    .con-list{
      display: flex;
      align-items: center;
      &>div{
        width: 1rem;
        text-align: center;
        padding: .1rem;
        background-color: #bfa;
        margin-left: .2rem;
        height: .8rem;
        line-height: .8rem;
      }
    }
  }
</style>